<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirm 组件示例</title>
    <link rel="stylesheet" href="./resources/css/custom-confirm.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
        }
        
        .header p {
            margin: 10px 0 0;
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 50px;
        }
        
        .section-title {
            font-size: 1.8em;
            color: #303133;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #409eff;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #67c23a;
        }
        
        .demo-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .demo-item {
            border: 1px solid #ebeef5;
            border-radius: 6px;
            padding: 20px;
            background: #fafafa;
        }
        
        .demo-item h4 {
            margin: 0 0 15px;
            color: #606266;
            font-size: 1.1em;
        }
        
        .demo-item p {
            margin: 0 0 15px;
            color: #909399;
            font-size: 0.9em;
        }
        
        .btn {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            margin: 5px;
        }
        
        .btn:hover {
            background: #66b1ff;
            transform: translateY(-1px);
        }
        
        .btn.success {
            background: #67c23a;
        }
        
        .btn.success:hover {
            background: #85ce61;
        }
        
        .btn.warning {
            background: #e6a23c;
        }
        
        .btn.warning:hover {
            background: #ebb563;
        }
        
        .btn.error {
            background: #f56c6c;
        }
        
        .btn.error:hover {
            background: #f78989;
        }
        
        .btn.secondary {
            background: #909399;
        }
        
        .btn.secondary:hover {
            background: #a6a9ad;
        }
        
        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #495057;
            overflow-x: auto;
        }
        
        .result {
            background: #f0f9ff;
            border-left: 4px solid #409eff;
            padding: 10px 15px;
            margin: 10px 0;
            border-radius: 0 4px 4px 0;
        }
        
        .result.success {
            background: #f0f9f0;
            border-left-color: #67c23a;
        }
        
        .result.error {
            background: #fef0f0;
            border-left-color: #f56c6c;
        }
        
        @media (max-width: 768px) {
            .content {
                padding: 20px;
            }
            
            .demo-group {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Custom Confirm 组件</h1>
            <p>功能强大、高度可定制的确认对话框组件示例</p>
        </div>
        
        <div class="content">
            <!-- 基础用法 -->
            <div class="section">
                <h2 class="section-title">基础用法</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>简单调用</h4>
                        <p>最简单的用法，直接传入消息文本</p>
                        <button class="btn" onclick="basicUsage()">显示确认框</button>
                        <div class="code-block">
customConfirm.show('这是一个简单的确认对话框');
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>带标题的确认框</h4>
                        <p>自定义标题和消息内容</p>
                        <button class="btn" onclick="withTitle()">显示带标题的确认框</button>
                        <div class="code-block">
customConfirm.show({
    title: '删除确认',
    message: '确定要删除这条记录吗？此操作不可撤销。'
});
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 不同类型 -->
            <div class="section">
                <h2 class="section-title">不同类型</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>信息提示</h4>
                        <p>用于一般信息提示</p>
                        <button class="btn" onclick="infoDialog()">信息提示</button>
                        <div class="code-block">
customConfirm.info('这是一条信息提示');
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>成功提示</h4>
                        <p>用于成功操作提示</p>
                        <button class="btn success" onclick="successDialog()">成功提示</button>
                        <div class="code-block">
customConfirm.success('操作成功完成！');
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>警告提示</h4>
                        <p>用于警告信息提示</p>
                        <button class="btn warning" onclick="warningDialog()">警告提示</button>
                        <div class="code-block">
customConfirm.warning('请注意，这是一个警告信息！');
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>错误提示</h4>
                        <p>用于错误信息提示</p>
                        <button class="btn error" onclick="errorDialog()">错误提示</button>
                        <div class="code-block">
customConfirm.error('发生了一个错误！');
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 确认对话框 -->
            <div class="section">
                <h2 class="section-title">确认对话框</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>标准确认框</h4>
                        <p>带有确认和取消按钮的对话框</p>
                        <button class="btn warning" onclick="confirmDialog()">确认对话框</button>
                        <div class="result" id="confirmResult">点击按钮查看结果</div>
                        <div class="code-block">
customConfirm.confirm('确定要执行此操作吗？')
    .then(result => {
        console.log('用户点击了确认');
    })
    .catch(result => {
        console.log('用户点击了取消');
    });
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>自定义按钮文本</h4>
                        <p>自定义确认和取消按钮的文本</p>
                        <button class="btn" onclick="customButtonText()">自定义按钮</button>
                        <div class="result" id="customButtonResult">点击按钮查看结果</div>
                        <div class="code-block">
customConfirm.confirm('确定要保存更改吗？', '保存确认', {
    confirmButtonText: '保存',
    cancelButtonText: '放弃'
});
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 高级配置 -->
            <div class="section">
                <h2 class="section-title">高级配置</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>居中显示</h4>
                        <p>内容居中对齐显示</p>
                        <button class="btn" onclick="centerDialog()">居中显示</button>
                        <div class="code-block">
customConfirm.show({
    title: '居中显示',
    message: '这个对话框的内容是居中显示的',
    center: true
});
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>圆角按钮</h4>
                        <p>使用圆角样式的按钮</p>
                        <button class="btn" onclick="roundButton()">圆角按钮</button>
                        <div class="code-block">
customConfirm.confirm('使用圆角按钮样式', '样式演示', {
    roundButton: true
});
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>自定义宽度</h4>
                        <p>设置对话框的自定义宽度</p>
                        <button class="btn" onclick="customWidth()">自定义宽度</button>
                        <div class="code-block">
customConfirm.show({
    title: '自定义宽度',
    message: '这个对话框设置了自定义宽度为600px',
    width: '600px'
});
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>禁用遮罩点击</h4>
                        <p>禁用点击遮罩层关闭对话框</p>
                        <button class="btn secondary" onclick="disableModalClick()">禁用遮罩点击</button>
                        <div class="code-block">
customConfirm.show({
    title: '禁用遮罩点击',
    message: '点击遮罩层无法关闭此对话框',
    closeOnClickModal: false
});
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 回调函数 -->
            <div class="section">
                <h2 class="section-title">回调函数</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>beforeClose 回调</h4>
                        <p>在关闭前执行的回调函数，可以阻止关闭</p>
                        <button class="btn" onclick="beforeCloseCallback()">beforeClose 回调</button>
                        <div class="result" id="beforeCloseResult">点击按钮查看结果</div>
                        <div class="code-block">
customConfirm.show({
    title: '确认关闭',
    message: '点击确认按钮会弹出二次确认',
    beforeClose: async (action, instance) => {
        if (action === 'confirm') {
            return confirm('真的要确认吗？');
        }
        return true;
    }
});
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>callback 回调</h4>
                        <p>操作完成后的回调函数</p>
                        <button class="btn" onclick="callbackFunction()">callback 回调</button>
                        <div class="result" id="callbackResult">点击按钮查看结果</div>
                        <div class="code-block">
customConfirm.confirm('执行操作？', '操作确认', {
    callback: (action, instance) => {
        console.log('回调函数被调用，操作:', action);
    }
});
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 特殊功能 -->
            <div class="section">
                <h2 class="section-title">特殊功能</h2>
                <div class="demo-group">
                    <div class="demo-item">
                        <h4>多个对话框</h4>
                        <p>同时显示多个对话框，支持层级管理</p>
                        <button class="btn" onclick="multipleDialogs()">多个对话框</button>
                        <div class="code-block">
// 连续显示多个对话框
customConfirm.info('第一个对话框');
setTimeout(() => {
    customConfirm.warning('第二个对话框');
}, 500);
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>关闭所有对话框</h4>
                        <p>一次性关闭所有打开的对话框</p>
                        <button class="btn secondary" onclick="closeAllDialogs()">关闭所有</button>
                        <div class="code-block">
customConfirm.closeAll();
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>HTML 内容</h4>
                        <p>支持在消息中使用 HTML 元素</p>
                        <button class="btn" onclick="htmlContent()">HTML 内容</button>
                        <div class="code-block">
const htmlElement = document.createElement('div');
htmlElement.innerHTML = '<strong>粗体文本</strong><br><em>斜体文本</em>';

customConfirm.show({
    title: 'HTML 内容',
    message: htmlElement
});
                        </div>
                    </div>
                    
                    <div class="demo-item">
                        <h4>自定义样式类</h4>
                        <p>添加自定义 CSS 类名</p>
                        <button class="btn" onclick="customClass()">自定义样式</button>
                        <div class="code-block">
customConfirm.show({
    title: '自定义样式',
    message: '这个对话框使用了自定义样式类',
    customClass: 'my-custom-dialog'
});
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="./resources/js/custom-confirm.js"></script>
    <script>
        // 基础用法
        function basicUsage() {
            customConfirm.show('这是一个简单的确认对话框');
        }
        
        function withTitle() {
            customConfirm.show({
                title: '删除确认',
                message: '确定要删除这条记录吗？此操作不可撤销。'
            });
        }
        
        // 不同类型
        function infoDialog() {
            customConfirm.info('这是一条信息提示');
        }
        
        function successDialog() {
            customConfirm.success('操作成功完成！');
        }
        
        function warningDialog() {
            customConfirm.warning('请注意，这是一个警告信息！');
        }
        
        function errorDialog() {
            customConfirm.error('发生了一个错误！');
        }
        
        // 确认对话框
        function confirmDialog() {
            customConfirm.confirm('确定要执行此操作吗？')
                .then(result => {
                    document.getElementById('confirmResult').innerHTML = 
                        '<span style="color: #67c23a;">✓ 用户点击了确认按钮</span>';
                    document.getElementById('confirmResult').className = 'result success';
                })
                .catch(result => {
                    document.getElementById('confirmResult').innerHTML = 
                        '<span style="color: #f56c6c;">✗ 用户点击了取消按钮</span>';
                    document.getElementById('confirmResult').className = 'result error';
                });
        }
        
        function customButtonText() {
            customConfirm.confirm('确定要保存更改吗？', '保存确认', {
                confirmButtonText: '保存',
                cancelButtonText: '放弃'
            })
                .then(result => {
                    document.getElementById('customButtonResult').innerHTML = 
                        '<span style="color: #67c23a;">✓ 用户选择了保存</span>';
                    document.getElementById('customButtonResult').className = 'result success';
                })
                .catch(result => {
                    document.getElementById('customButtonResult').innerHTML = 
                        '<span style="color: #f56c6c;">✗ 用户选择了放弃</span>';
                    document.getElementById('customButtonResult').className = 'result error';
                });
        }
        
        // 高级配置
        function centerDialog() {
            customConfirm.show({
                title: '居中显示',
                message: '这个对话框的内容是居中显示的',
                center: true
            });
        }
        
        function roundButton() {
            customConfirm.confirm('使用圆角按钮样式', '样式演示', {
                roundButton: true
            });
        }
        
        function customWidth() {
            customConfirm.show({
                title: '自定义宽度',
                message: '这个对话框设置了自定义宽度为600px，可以容纳更多的内容。你可以根据实际需要调整对话框的宽度，以获得最佳的用户体验。',
                width: '600px'
            });
        }
        
        function disableModalClick() {
            customConfirm.show({
                title: '禁用遮罩点击',
                message: '点击遮罩层无法关闭此对话框，只能通过按钮或ESC键关闭',
                closeOnClickModal: false
            });
        }
        
        // 回调函数
        function beforeCloseCallback() {
            customConfirm.show({
                title: '确认关闭',
                message: '点击确认按钮会弹出二次确认，点击取消直接关闭',
                beforeClose: async (action, instance) => {
                    if (action === 'confirm') {
                        const shouldClose = confirm('真的要确认吗？这是二次确认。');
                        document.getElementById('beforeCloseResult').innerHTML = 
                            shouldClose ? 
                            '<span style="color: #67c23a;">✓ 通过了二次确认</span>' :
                            '<span style="color: #e6a23c;">⚠ 二次确认被取消</span>';
                        document.getElementById('beforeCloseResult').className = 
                            shouldClose ? 'result success' : 'result';
                        return shouldClose;
                    }
                    document.getElementById('beforeCloseResult').innerHTML = 
                        '<span style="color: #909399;">用户直接取消了操作</span>';
                    document.getElementById('beforeCloseResult').className = 'result';
                    return true;
                }
            });
        }
        
        function callbackFunction() {
            customConfirm.confirm('执行操作？', '操作确认', {
                callback: (action, instance) => {
                    const resultElement = document.getElementById('callbackResult');
                    if (action === 'confirm') {
                        resultElement.innerHTML = '<span style="color: #67c23a;">✓ 回调函数被调用，操作: ' + action + '</span>';
                        resultElement.className = 'result success';
                    } else {
                        resultElement.innerHTML = '<span style="color: #f56c6c;">✗ 回调函数被调用，操作: ' + action + '</span>';
                        resultElement.className = 'result error';
                    }
                    console.log('回调函数被调用，操作:', action);
                }
            });
        }
        
        // 特殊功能
        function multipleDialogs() {
            customConfirm.info('第一个对话框 - 信息提示');
            setTimeout(() => {
                customConfirm.warning('第二个对话框 - 警告提示');
            }, 500);
            setTimeout(() => {
                customConfirm.success('第三个对话框 - 成功提示');
            }, 1000);
        }
        
        function closeAllDialogs() {
            // 先打开几个对话框
            customConfirm.info('对话框 1');
            customConfirm.warning('对话框 2');
            customConfirm.error('对话框 3');
            
            // 2秒后关闭所有
            setTimeout(() => {
                customConfirm.closeAll();
                customConfirm.success('所有对话框已关闭！');
            }, 2000);
        }
        
        function htmlContent() {
            const htmlElement = document.createElement('div');
            htmlElement.innerHTML = `
                <div style="text-align: center;">
                    <h3 style="color: #409eff; margin: 0 0 10px;">HTML 内容示例</h3>
                    <p><strong>粗体文本</strong></p>
                    <p><em>斜体文本</em></p>
                    <p><u>下划线文本</u></p>
                    <p style="color: #67c23a;">绿色文本</p>
                    <hr style="margin: 15px 0;">
                    <small>支持各种 HTML 元素</small>
                </div>
            `;
            
            customConfirm.show({
                title: 'HTML 内容',
                message: htmlElement,
                center: true
            });
        }
        
        function customClass() {
            // 动态添加自定义样式
            const style = document.createElement('style');
            style.textContent = `
                .my-custom-dialog {
                    border: 3px solid #409eff;
                    box-shadow: 0 0 20px rgba(64, 158, 255, 0.3);
                }
                .my-custom-dialog .custom-confirm-title {
                    color: #409eff;
                    text-align: center;
                }
                .my-custom-dialog .custom-confirm-message {
                    text-align: center;
                    font-size: 16px;
                    color: #409eff;
                }
            `;
            document.head.appendChild(style);
            
            customConfirm.show({
                title: '自定义样式',
                message: '这个对话框使用了自定义样式类，具有特殊的边框和颜色',
                customClass: 'my-custom-dialog',
                center: true
            });
        }
        
        // 键盘事件提示
        document.addEventListener('DOMContentLoaded', function() {
            customConfirm.info('欢迎使用 Custom Confirm 组件！\n\n提示：可以使用 ESC 键关闭对话框', '欢迎');
        });
    </script>
</body>
</html>